<!-- 登录页面 -->
<template>
  <div class="loginbox wh-100 center">
    <Transition
      name="fade"
      mode="out-in"
      enter-active-class="animate__animated animate__bounceInDown"
      leave-active-class="animate__animated animate__backOutDown"
    >
      <component
        @toggleComponet="getActiveComponent"
        :is="activeComponent"
      ></component>
    </Transition>
  </div>
</template>

<script>
import LoginComp from "@/components/LoginComp.vue";
import RegisterComp from "@/components/RegisterComp.vue";
export default {
  name: "LoginView",
  components: {
    LoginComp,
    RegisterComp,
  },
  data() {
    return {
      activeComponent: "LoginComp",
    };
  },
  methods: {
    getActiveComponent(activeComponentName) {
      this.activeComponent = activeComponentName;
    },
  },
};
</script>

<style scoped lang="scss">
.loginbox {
  background: url("@/assets/bg.png") no-repeat;
  background-size: 100% 100%;
}
</style>
